<template>
  <div class="item-wrap">
    <el-checkbox :model-value="item.isSuccess" @change='checkChange'></el-checkbox>
    <p v-if="show" class="content" :class="{success: item.isSuccess}">{{item.label}}</p>
    <div v-else class="input-box">
      <el-input
        class="input"
        size="small"
        v-model="text"
        placeholder="请输入内容"
        clearable
      ></el-input>
      <i class="icon el-icon-check" @click="confirmEdit"></i>
      <i class="icon el-icon-close" @click="onCancel"></i>
    </div>
    <div>
      <i class="icon el-icon-edit-outline" @click="onEdit"></i>
      <el-popconfirm
        title="这是一段内容确定删除吗？"
        @confirm="onDelete"
        confirmButtonText='确定'
        cancelButtonText='取消'
      >
        <template #reference>
          <i class="icon el-icon-delete-solid"></i>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, computed } from 'vue'
import { useStore, mapState } from 'vuex'
export default defineComponent({
  props: {
    item: {
      type: Object,
      default: {}
    },
    index: {
      type: Number,
      default: 0
    }
  },
  // data () {
  //   return {
  //     test: 'xxx'
  //   }
  // },
  // methods: {
  //   onCancel () {
  //     this.test = 'ccc'
  //     this.show = true
  //   }
  // },
  computed: mapState('TodoList', ['name']),
  setup (props) {
    const store = useStore()
    const text = ref<string>('')
    const show = ref<boolean>(true)
    const checkChange = (value: boolean) => {
      console.log(value)
      store.commit('TodoList/CHECKTASK', { index: props.index, value })
    }
    const onCancel = () => {
      show.value = true
      text.value = ''
    }
    const onEdit = () => {
      show.value = false
      text.value = props.item.label
    }
    const confirmEdit = () => {
      if (!text.value || !text.value.length) {
        return
      }
      store.commit('TodoList/EDIT', {index: props.index, value: text.value})
      show.value = true
      text.value = ''
    }
    const onDelete = () => {
      store.commit('TodoList/DEL', props.index)
    }
    return {
      text,
      show,
      onCancel,
      onEdit,
      confirmEdit,
      onDelete,
      checkChange
    }
  }
})
</script>

<style lang="scss" scoped>
.item-wrap {
  display: flex;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid #999;
  margin-bottom: 10px;
  padding-right: 20px;
}
.content {
  flex: 1;
  margin: 0 10px;
  text-align: left;
  &.success {
    text-decoration: line-through;
    color: #ccc;
  }
}
.input-box {
  display: flex;
  flex: 1;
  margin: 0 10px;
  align-items: center;
  .input {
    width: 400px;
  }
}
.icon {
  cursor: pointer;
}
</style>